---
title: Collapse app config
---


::doc-component-demo
---
title: Sidebar presentation
---
The collapse layout focuses on a single sidebar with a list of menu links, ideal for smaller apps if you don't have enough content or pages to use a more complex layout like the sidebar layout.

:doc-heading{label="Layout features"}

- **Navigation (expanded):** 

  :::doc-link-image
  ---
  src: /img/apps/tairo-layout-collapse.png
  srcDark: /img/apps/tairo-layout-collapse-dark.png
  ---
  :::

- **Navigation (collapsed):**  The collapse layout can be folded into an icon sidebar. The collapse layout can have single menu links or submenu links. Clicking on a submenu link will revert the sidebar to its uncollapsed state

  :::doc-link-image
  ---
  src: /img/apps/tairo-layout-collapse-collapsed.png
  srcDark: /img/apps/tairo-layout-collapse-collapsed-dark.png
  ---
  :::


- **Toolbar:** The toolbar is displayed at the top of the main content area. It can be used to display the current page title and a set of quick actions.

  :::doc-link-image
  ---
  src: /img/apps/tairo-toolbar.png
  srcDark: /img/apps/tairo-toolbar-dark.png
  ---
  :::


- **Cirular menu:** When scrolling down, the circular menu is displayed at the top right of the screen. It can be used to display a set of quick actions.

  :::doc-link-image
  ---
  src: /img/apps/tairo-layout-collapse-circular-menu.png
  srcDark: /img/apps/tairo-layout-collapse-circular-menu-dark.png
  ---
  :::


::


::doc-component-demo
---
title: Collapse configuration
---

First you need to enable the collapse layout layer in the `nuxt.config.ts` file.

```ts [app/nuxt.config.ts]
export default defineNuxtConfig({
  extends: [
    '../layers/tairo-layout-collapse',
  ]
})
```

Then you can configure the collapse layout in the `app.config.ts` file.


```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    collapse: {
      // collapse config
    },
  },
})
```


:doc-heading{label="Default configuration"}


```ts [layers/tairo-layout-collapse/app.config.ts]
export default defineAppConfig({
  tairo: {
    collapse: {
      circularMenu: {
        enabled: true,
        tools: [],
      },
      toolbar: {
        enabled: true,
        showTitle: false,
        showNavBurger: false,
        tools: [],
      },
      navigation: {
        enabled: true,
        header: {
          component: '',
          resolve: true,
        },
        footer: {
          component: '',
          resolve: true,
        },
        items: [],
      },
    },
  },
})
```

You don't need to specify all the properties, only the ones you want to override.

:doc-heading{label="Tools"}

To add `tools` to the toolbar or the circular menu, you have to create global components, and add them to the `tools` array.

```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    collapse: {
      toolbar: {
        tools: [
          {
            // Use a global component
            component: 'DemoThemeToggle',
            // Define the component props, if any
            props: {
              disableTransitions: true,
            },
          },
        ],
      },
    },
  },
})
```



:doc-heading{label="Navigation Header"}

You can add a header or/and a footer to the navigation sidebar. You can use a global component or a local component.

```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    collapse: {
      navigation: {
        header: {
          component: 'DemoCollapseNavigationHeader',
        },
        footer: {
          component: 'DemoCollapseNavigationFooter',
        },
      },
    },
  },
})
```

:doc-heading{label="Navigation items"}

```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    collapse: {
      navigation: {
        items: [
          {
            name: 'List Widgets',
            icon: { name: 'ph:chat-circle-duotone', class: 'w-5 h-5' },
            to: '/dashboards/',
          },
          {
            name: 'Documentation',
            icon: { name: 'ph:app-window-duotone', class: 'w-5 h-5' },
            activePath: '/documentation',
            children: [
              {
                name: 'Collapse',
                to: '/documentation/shuriken-ui/forms/listbox',
                icon: { name: 'ph:sidebar-duotone', class: 'w-4 h-4' },
              },
              {
                name: 'Collapse 2 ',
                to: '/documentation/shuriken-ui/forms/input',
                icon: { name: 'ph:sidebar-duotone', class: 'w-4 h-4' },
              },
            ],
          },
          {
            name: 'Search',
            icon: { name: 'ph:magnifying-glass-duotone', class: 'w-5 h-5' },
            click: () => {
              const { open } = usePanels()
              open('search')
            },
          },
          {
            name: 'Divider',
            divider: true,
          },
          {
            name: 'Settings',
            icon: { name: 'ph:gear-six-duotone', class: 'w-5 h-5' },
            to: '/dashboards/analytics',
          },
        ],
      },
    },
  },
})
```


::




:doc-component-list{prefix="TairoCollapse"}



::doc-nav
---
prev: /documentation/config/sidebar
next: /documentation/tailwindcss
---
::